<template>
    <fieldset style="margin-left: 30%; border: 0;">
        <input type="text" id="title" class="ipt" name="title" placeholder="添加ToDo" required="required"
            autocomplete="off" v-model="val" @keydown.enter="handleInput" />
        <h2 onclick="save()">正在进行 <span id="todocount"></span></h2>
        <!-- <ol id="todolist" class="demo-box">
        </ol>
        <ol id="todolist" class="demo-box">
			</ol> -->
        <ul>
            <li v-for="(item, index) in arr" :key="index">
                <input type="checkbox" value="data" name="daats" @click="sendComplete(index)"  />
                <span>{{ item }}</span>
                <button class="but" @click="deleteThing(index)">删除</button>
            </li>
        </ul>

    </fieldset>
</template>

<script setup>
import bus from "../utils/bus"
import { ref } from "vue"

let arr = ref(["西瓜", "火龙果", "哈密瓜"])
let val = ref('')
let ipt = ref(null)

// 添加正在进行的事件
function handleInput() {
    arr.value.push(val.value)

    // 回车后input输入款清空
    val.value = ''
}

// 删除正在进行的事件
function deleteThing(index) {
    arr.value.splice(index, 1)
}


// 将正在进行的事件添加到已完成的事件中
function sendComplete(index) {
    // 发送到Completed组件中
    let data = arr.value.slice(index, index + 1)
    bus.$emit('send', data[0])
    let daats=data[0]
    // 删除发送的事件
    arr.value.splice(index, 1)

}
//接收completed传递过来的信息
bus.$on('sends', datas => {
    // console.log(data)
    arr.value.push(datas)
})
</script>
<style>
#title {
    float: right;
    margin-top: 20px;
    margin-right: 30%;
    width: 350px;
    border-radius: 6px;
    text-indent: 10px;
    line-height: 1.7;
    font-size: 16px;
    border: none;
    outline: none;
}
li{
    background-color: #fff;
}
</style>